<script setup>
import router from '../router';
import { getCurrentInstance, reactive, ref, onMounted } from 'vue'
const { proxy } = getCurrentInstance();
import { fetchApi } from '../apis/fetchapi'
import { userStore } from '../store/index'
const userSData = userStore();
import GoBack from '../components/GoBack.vue'
const myActivityList = ref([])
const pageNo = ref(1);
const pageSize = ref(100)
onMounted(() => {
  fetchApi('/my-act', {
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }).then(res => {
    if (res.code === 200) {
      myActivityList.value = myActivityList.value.concat(...res.data.list);
      console.log(myActivityList.value)
    }
  })
})

function statusInfo(status) {
  let obj = {};
  if (status == 3) {
    obj = {
      classname: 'status3',
      text: '已完成'
    }
  } else if (status == 2) {
    obj = {
      classname: 'status2',
      text: '已拒绝'
    }
  } else if (status == 1) {
    obj = {
      classname: 'status1',
      text: '进行中'
    }
  } else {
    obj = {
      classname: 'status0',
      text: '未审核'
    }
  }
  return obj
}
function toDetail(data) {
  userSData.setMyActivityData(data);
  router.push({ path: '/mydetail', query: { id: data.id } })
}
</script>

<template>
  <div class="mine-container">
    <GoBack title="我的活动"></GoBack>
    <div class="mine-con">

      <div class="list-con">
        <div class="list">
          <div class="li" v-for="item in myActivityList" :key="item.id">
            <div class="logo">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="con">
              <div class="title">{{ item.title }}</div>
              <div class="time">活动时间：{{ item.beginTime }}-{{ item.endTime }}</div>
              <div class="btns">
                <div class="btn" :class="statusInfo(item.status).classname">{{ statusInfo(item.status).text }}</div>
                <div class="btn" @click="toDetail(item)">查看详情</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
.mine-container {
  width: 100%;
  overflow: hidden;
  height: 100vh;

  .confirm-title {
    font-size: 32px;
    color: rgb(255, 27, 27);
    text-align: center;
    line-height: 60px;
    height: 105px;
  }
}

.mine-con {
  margin: 10px auto 0;
  padding-bottom: 50px;
  border-radius: 20px 20px 0 0;
  background: rgb(245, 245, 245);
}


.list-con {
  width: 100%;
  margin: 0 auto;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  padding: 20px 20px 5px;
  height: calc(100vh - 75px - 54px);
  overflow: auto;

  .li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 12px;
  }


  .logo {
    width: 66px;
    height: 95px;
    background: rgb(22, 130, 254);
    border-radius: 5px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .con {
    width: 230px;
    margin-left: 12px;
  }

  .title {
    color: rgb(62, 66, 73);
    font-size: 16px;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  .time {
    color: rgb(62, 66, 73);
    font-size: 12px;
    line-height: 28px;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: rgb(146, 146, 176);
  }

  .btns {
    height: 35px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    .btn {
      width: 72px;
      height: 35px;
      line-height: 35px;
      border-radius: 2px;
      display: flex;
      color: #ffffff;
      background: rgb(255, 191, 51);
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-right: 15px;

      &.status0 {
        background: rgb(187, 187, 187);
      }

      &.status1 {
        background: rgb(233, 157, 66)
      }

      &.status2 {
        background: rgb(231, 56, 34);
      }

      &.status3 {
        background: rgb(129, 179, 55);
      }
    }
  }
}
</style>